<template>
    <view>
        <!-- 自定义导航栏 -->
        <custom-nav-bar @search="onSearchConfirm"></custom-nav-bar>

        <!-- 热门搜索 -->
        <card headTitle="热门搜索" bodyCover="../../static/images/demo4.jpg"></card>
        <!-- 多色按钮 -->
        <view class="px-1 mb-2">
            <color-tag v-for="(item,index) in hot" :key="index"
                       :item="item" @click="quickSearch(item.name)"></color-tag>
        </view>
        
        <!-- 常用分类 -->
        <card headTitle="常用分类" :bodyPadding="true" :headBorderBottom="false">
            <color-tag v-for="(item,index) in cate" :key="index"
                       :item="item" :color="false" @click="quickSearch(item.name)"></color-tag>
        </card>
        
        <template v-if="historyList.length > 0">
            <!-- 分割线 -->
            <divider />
            <!-- 搜索记录 -->
            <card headTitle="搜索记录">
                <view slot="right" class="font text-primary"
                      @click="clearHistory">清除搜索历史</view>
                <uni-list-item v-for="(item, index) in historyList" :key="index"
                               :title="item" :showArrow="false" @click="quickSearch(item)"></uni-list-item>
            </card>
        </template>
    </view>
</template>

<script>
import card from "@/components/common/card.vue";
import colorTag from "@/components/search/color-tag.vue";
import uniListItem from "@/components/uni-ui/uni-list-item/uni-list-item.vue";
import customNavBar from "@/components/search/custom-navBar.vue"; // 确保只引入一次

export default {
    components: {
        card, colorTag, uniListItem, customNavBar
    },
    data() {
        return {
            historyList: [], 
            keyword: "",
            hot: [
                { name: '领券中心' },
                { name: 'Redmi K20' },
                { name: 'RedmiBook 14' },
                { name: '智能积木 越野四驱车' },
                { name: '手环 腕带' },
            ],
            cate: [
                { name: '耳机' },
                { name: '手机' },
                { name: '音箱' },
                { name: '手表' },
                { name: '配件' },
                { name: '网关/传感器' },
                { name: '健康' },
                { name: '酷玩' },
            ],
        }
    },
    methods: {
        onSearchConfirm(keyword) {
            this.keyword = keyword;
            if (this.keyword.trim() === "") {
                uni.showToast({
                    title: '关键词不能为空',
                    icon: 'none'
                });
                return;
            }

            uni.navigateTo({
                url: '../search-list/search-list?keyword=' + this.keyword,
            });

            setTimeout(() => {
                this.addHistory();
            }, 500);
        },
        quickSearch(name){
            this.keyword = name;
            this.onSearchConfirm(this.keyword);
        },
        addHistory(){
            let index = this.historyList.indexOf(this.keyword);
            if (index === -1) {
                this.historyList.unshift(this.keyword);
            } else {
                this.historyList.unshift(this.historyList.splice(index,1)[0]);
            }
            // 移除最后一条
            if (this.historyList.length > 6) {
                this.historyList.splice(this.historyList.length - 1,1);
            }
            uni.setStorageSync('searchHistory', JSON.stringify(this.historyList));
        },
        clearHistory(){
            uni.showModal({
                title: '提示',
                content: '是否要清除搜索历史？',
                cancelText: '取消',
                confirmText: '清除',
                success: res => {
                    if (res.confirm) {
                        uni.removeStorageSync('searchHistory');
                        this.historyList = [];
                    }
                },
            });
        },
        onLoad() {
            console.log('Current page path:', this.$route.path);
        },
        onShow() {
            console.log('Current page path:', this.$route.path);
            // 加载历史记录
            let history = uni.getStorageSync('searchHistory');
            this.historyList = history ? JSON.parse(history) : [];
        }
    }
}
</script>

<style>
/* ... 已有的样式 */
</style>